<!-- 排序 -->
<script setup>
const emits = defineEmits(['change', 'update:modelValue']);

const props = defineProps({
    modelValue: { 
        type: Object,
        default:()=>{}
    },
    sortOption:{
        type:Array,
        default:[]
    }
})
const { sortOption } = props
const formData = reactive(props.modelValue);

const sortBy = (index) => {
    console.log(formData,index)
    formData[index].isAsc = !formData[index].isAsc
    handleChange()
}
const sortByCaret = (index, key) => {
    formData[index].isAsc = key
    handleChange()
}

const handleChange = () => {
  emits('change', emits('update:modelValue', formData));
};
</script>

<template>
    <div class="sort">
        <span class="mr-8px">排序：</span>
        <div class="option" v-for="(item, index) in sortOption" :key="index" :class="formData[index].isAsc?'asc':'desc'"
            @click.stop="sortBy(index)">
            {{ item }}
            <span class="caret-wrapper">
                <i class="sort-caret asc" @click.stop="sortByCaret(index, true)"></i>
                <i class="sort-caret desc" @click.stop="sortByCaret(index, false)"></i>
            </span>
        </div>
    </div>
</template>

<style scoped lang='scss'>
.sort {
    padding: 16px 0;
    display: flex;
    align-items: center;

    .option {
        height: 36px;
        line-height: 36px;
        padding: 0 12px;
        background-color: #F0F2F9;
        border-radius: 8px;
        cursor: pointer;
        user-select: none;

        &.isDefault {
            color: #000;
        }

        .caret-wrapper {
            margin-left: 8px;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            height: 34px;
            width: 24px;
            vertical-align: middle;
            cursor: pointer;
            overflow: initial;
            position: relative;

            .sort-caret {
                width: 0;
                height: 0;
                border: 5px solid transparent;
                position: absolute;
                left: 7px;

                &.asc {
                    border-bottom-color: #999;
                    top: 5px;
                }

                &.desc {
                    border-top-color: #999;
                    bottom: 7px;
                }
            }
        }

        &.asc {
            color: #000;

            .sort-caret.asc {
                border-bottom-color: #000;
            }
        }

        &.desc {
            color: #000;

            .sort-caret.desc {
                border-top-color: #000;
            }
        }
    }

    .option+.option {
        margin-left: 12px;
    }
}
</style>
